<template>
  <page-header-wrapper>
    <a-card :bordered="false" size="small">
      <div class="table-page-search-wrapper">
        <a-row :gutter="48">
          <a-col :md="24" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button size="small" type="primary" @click="loadData">刷新</a-button>
              <a-button size="small" type="primary" style="margin-left: 8px" @click="clearAll">清空</a-button>
            </span>
          </a-col>
        </a-row>
      </div>

      <a-list item-layout="vertical" size="small" :pagination="pagination" :data-source="dataList">
        <template #renderItem="item">
          <a-list-item :key="item.id">
            <a-descriptions>
              <a-descriptions-item label="请求方法">{{ item.requestMethod }}</a-descriptions-item>
              <a-descriptions-item label="请求时间">{{ item.createTime }}</a-descriptions-item>
              <a-descriptions-item label="请求地址">{{ item.requestIp }}</a-descriptions-item>
              <a-descriptions-item label="响应状态">{{ item.responseStatus }}</a-descriptions-item>
              <a-descriptions-item label="响应头" :span="2">{{ item.responseHeader }}</a-descriptions-item>
              <a-descriptions-item label="响应体" :span="3">
                {{ item.responseBody }}
              </a-descriptions-item>
            </a-descriptions>
          </a-list-item>
        </template>
      </a-list>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { failmsg } from '@/api/api'
import { getList, clear } from '@/api/mock-url-log'
import { STable } from '@/components'
import { Collapse } from 'ant-design-vue'
export default {
  name: 'UrlLogList',
  components: {
    STable,
    'a-collapse': Collapse,
    'a-collapse-panel': Collapse.Panel,
  },
  data() {
    this.columns = [
      {
        title: '#',
        width: '60px',
        scopedSlots: { customRender: 'serial' },
      },
      {
        title: '路径名称',
        dataIndex: 'name',
      },
      {
        title: '请求方法',
        dataIndex: 'requestMethod',
      },
      {
        title: '响应码',
        dataIndex: 'resposneStatus',
      },
    ]
    return {
      queryParam: {},
      pagination: {
        current: 1,
        pageSize: 5,
        total: 0,
        onChange: (page) => {
          this.pagination.current = page
          this.loadData()
        },
      },
      activeKey: null,
      dataList: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign(
          { current: this.pagination.current, size: this.pagination.pageSize },
          parameter,
          this.queryParam
        )
        getList(requestParameters)
          .then((res) => {
            this.pagination.total = res.total
            this.dataList = res.records
          })
          .catch((error) => {
            failmsg(error)
          })
      },
    }
  },
  mounted() {
    this.loadData({})
  },
  methods: {
    clearAll() {
      clear({}).then(() => this.loadData({}))
    },
  },
}
</script>
